﻿@using GlobalResources;
@using Microsoft.Azure.IoTSuite.Connectedfactory.WebApp.Models
@using Microsoft.Azure.IoTSuite.Connectedfactory.WebApp.Security

@model OpcSessionModel

<div class="container-fluid browser_connect_container">
    <div class="row browser_connect_header">
        <div class="browser_connect_header_text">@Strings.BrowserSelectEndpoint</div>
    </div>
    <div class="row browser_top_container scrollbar-inner">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table class="table_container_twin">
                <thead>
                    <tr>
                        <th class="table_header">@Strings.HeaderEndpointUrl</th>
                        <th class="table_header">@Strings.HeaderSecurityMode</th>
                        <th class="table_header">@Strings.HeaderSecurityPolicy</th>
                        <th class="table_header">@Strings.HeaderSecurityLevel</th>
                        <th class="table_header">@Strings.HeaderEndpointActivation</th>
                    </tr>
                </thead>
                <tbody>
                    @{ int i = 0;}
                    @{ string toggleLabel = null;}
                    @if (Model.endpointList != null && Model.endpointList.Count != 0)
                    {
                        foreach (var endpoint in Model.endpointList)
                        {
                            <tr id="table_supervisor_id@(i)" class="table_ListItem_container">
                                <td id="supervisor_table_content_endpointUrls@(i)" class="table_content">
                                    @endpoint.EndpointUrl
                                </td>
                                <td id="supervisor_table_content_securityMode@(i)" class="table_content">
                                    @endpoint.SecurityMode
                                </td>
                                <td id="supervisor_table_content_securityPolicy@(i)" class="table_content">
                                    @endpoint.SecurityPolicy
                                </td>
                                <td id="supervisor_table_content_securityLevel@(i)" class="table_content">
                                    @endpoint.SecurityLevel
                                </td>
                                <td id="supervisor_table_content@(i)" class="table_content">
                                    <label class="label">
                                        <div id="toggle_id@(i)" class="toggle">
                                            @if (@endpoint.Activated == true)
                                            {
                                                <input id="toggle@(i)" class="toggle-state" type="checkbox" name="check" checked="checked" value="@endpoint.EndpointId" onchange="checkToggle(this, @i)" />
                                                toggleLabel = Strings.ActivateEndpointToggleOn;
                                            }
                                            else
                                            {
                                                <input id="toggle@(i)" class="toggle-state" type="checkbox" name="check" value="@endpoint.EndpointId" onchange="checkToggle(this, @i)" />
                                                toggleLabel = Strings.ActivateEndpointToggleOff;
                                            }
                                            <div class="toggle-inner">
                                                <div class="indicator"></div>
                                            </div>
                                            <div class="active-bg"></div>
                                        </div>
                                        <div id="label-text@(i)" class="label-text">@toggleLabel</div>
                                    </label>
                                </td>
                                <td id="browser_button@(i)" class="table_content">
                                    <label class="label">
                                        @Html.ActionLink(@Strings.ButtonBrowseNodes, "BrowseNodes", "Browser", new { endpointId = @endpoint.EndpointId, endpointUrl = @endpoint.EndpointUrl, productUri = @endpoint.ProductUri }, new { @class = "dashboard_link" })
                                    </label>
                                </td>
                            </tr>
                            i++;
                        }
                    }
                    else
                    {
                        <tr class="table_ListItem_container">
                            <td>no machines found</td>
                        </tr>
                    }
                </tbody>
            </table>
            <div class="row browser_browse_disconnect_button">
                @Html.ActionLink(@Strings.ButtonBack, "Index", "Supervisor", null, new { @class = "btn btn-default btn_browser", @role = "button" })
            </div>
        </div>
    </div>

    <div id="connectContextpanel" class="overlay">
        <div class="dashboard_contextpanel_header">
            <div id="connectContextpanelHeader" class="dashboard_contextpanel_header_text">@Strings.BrowserSecurityWarning</div>
        </div>
        <a aria-label="closePanel" href="#" class="closebtn" onclick="closeConnectContextPanel();" role="button" ><img aria-label="closePanelIcon" class="dashboard-cancel-icon" src="~/Content/img/cancel.svg" hidden></a>

        <div id="errorContextPanel" class="overlay-content">
            <div class="browser_error_contextpanel_container">
                <span class="browser_error_contextpanel_header">@Strings.BrowserErrorMessage</span>
                <div id="errorHeader" class="browser_error_contextpanel_message"></div>
            </div>
        </div>
    </div>

    <script>
    $(document).ready(function () {
        jQuery('.scrollbar-macosx').scrollbar();
        // initialize all context panels to default state closed
        $("#connectContextpanel").addClass("overlay-close").removeClass("overlay-right-open");
        $("#errorContextPanel").addClass("overlay-close").removeClass("overlay-right-open");
        var count = @Model.endpointList.Count

        for (var i = 0; i < count; i++) {
            if ($("#label-text" + i).text() == '@Strings.ActivateEndpointToggleOn') {
                $("#browser_button" + i).show();
            }
            else {
                $("#browser_button" + i).hide();
            }
        }

        @if (!PermsChecker.HasPermission(Permission.ControlOpcServer))
        {
           @: $(".toggle-state").prop("disabled", true);
           @: $(".toggle").css("background", "gray");
           @: $(".active-bg").css("background", "gray");
           @: $(".indicator").css("background", "darkgray");
           @: $(".label-text").css("color", "gray");
           @: $(".label").css("cursor", "default");
        }
    });

    var title = "@Strings.TitleBrowser";

    function checkToggle(element, index) {
        if (element.checked == true) {
            $("#label-text" + index).html('@Strings.ActivateEndpointToggleOn');
            activateEndpoint(element.value);
            $("#browser_button" + index).show();
        } else {
            $("#label-text" + index).html('@Strings.ActivateEndpointToggleOff');
            deActivateEndpoint(element.value);
            $("#browser_button" + index).hide();
        }
    }

    function activateEndpoint(endpointId) {
        $.post({
            url: "/Browser/Activate",
            data: { __RequestVerificationToken: $('[name=__RequestVerificationToken]').val(), endpointId: endpointId },
            success: function onSuccess(response) {
            },
            error: function (response) {
                console.error("error setting activation Endpoint: ", response.d, response.responseText);
            },
            complete: function () {
            }
        });
    }

    function deActivateEndpoint(endpointId) {
        $.post({
            url: "/Browser/DeActivate",
            data: { __RequestVerificationToken: $('[name=__RequestVerificationToken]').val(), endpointId: endpointId },
            success: function onSuccess(response) {
            },
            error: function (response) {
                console.error("error setting activation Endpoint: ", response.d, response.responseText);
            },
            complete: function () {
            }
        });
    }

    function openConnectContextPanel() {
        $("#connectBodyContextPanel").hide();
        $("#errorContextPanel").hide();
        $("#connectContextpanel").removeClass("overlay-close").addClass("overlay-right-open");
        $("#connectContextpanelHeader").html("@Strings.BrowserConnect");
        $("#proceedButton").hide();
        $("#cancelButton").hide();
        $("#waitingForConnect").show();
        $(".dashboard-cancel-icon").show();
        $(".dashboard_contextpanel_select_filter_button").css({ "margin-left": marginLeft });
    }

     function closeConnectContextPanel() {
        $("#connectContextpanel").addClass("overlay-close").removeClass("overlay-right-open");
    }
    </script>

